import { Card, Form, DatePicker, TimePicker, Button } from 'antd';
const { RangePicker } = DatePicker;
const formItemLayout = {
  labelCol: {
    xs: { span: 8 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 28 },
    sm: { span: 20 },
  },
};
const config = {
  rules: [{ type: 'object', required: true, message: '请选择时间!' }],
};
const rangeConfig = {
  rules: [{ type: 'array', required: true, message: '请选择时间!' }],
};
function FormDateIndex() {
  const onFinish = (fieldsValue) => {
    const rangeValue = fieldsValue['range-picker'];
    const rangeTimeValue = fieldsValue['range-time-picker'];
    const values = {
      ...fieldsValue,
      'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
      'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
      'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
      'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
      'range-time-picker': [
        rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
        rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
      ],
      'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
    };
    console.log('表单的接收值: ', values);
  };
  return (
    <Card className="card-no-border">
      <Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
        <Form.Item name="date-picker" label="DatePicker" {...config}>
          <DatePicker />
        </Form.Item>
        <Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>
        <Form.Item name="month-picker" label="MonthPicker" {...config}>
          <DatePicker picker="month" />
        </Form.Item>
        <Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
          <RangePicker />
        </Form.Item>
        <Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
          <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>
        <Form.Item name="time-picker" label="TimePicker" {...config}>
          <TimePicker />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 4 },
          }}
        >
          <Button type="primary" htmlType="submit">
            提交
        </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default FormDateIndex;
